<template>
  <div class="nav-wrapper">
    <div class="colorCS">中国人民解放军75714部队</div>
    <div class="bar-title">仓库可视化管理大屏</div>
    <div class="time">{{ currentDateTime }}</div>
  </div>
</template>

<script>
export default {
  name: "navBar",
  data() {
    return {
      currentDateTime: this.formatCurrentDateTime(),
    };
  },
  mounted() {
    setInterval(this.updateDateTime, 1000);
  },
  methods: {
    updateDateTime() {
      this.currentDateTime = this.formatCurrentDateTime();
    },
    formatCurrentDateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, "0");
      const day = now.getDate().toString().padStart(2, "0");
      const hours = now.getHours().toString().padStart(2, "0");
      const minutes = now.getMinutes().toString().padStart(2, "0");
      const seconds = now.getSeconds().toString().padStart(2, "0");

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-wrapper {
  height: 100%;
  line-height: 370%;
  width: 100%;
  background: url("../assets/nav.png") no-repeat;
  background-size: 100% 100%;
  text-align: center;
  position: relative;
  color: #b3efff;

  .bar-title {
    font-size: 2rem;
    font-family: "黑体";
    cursor: pointer;
  }

  .time {
    color: white;
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-35%);
    font-family: "Time Number";
    font-weight: bold;
    font-size: 1.5rem;
    color: #b3efff;
    font-family: "宋体";
  }
  .colorCS {
    font-size: 1.5rem;
    font-style: italic;
    font-weight: bold;
    position: absolute;
    left: 0%;
    top: 40%;
    width: 30%;
    height: 70%;
  }
}
</style>
